<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>父的银子：{{ money }}万元</h4>
    <h4>父的车：{{ car.brand }},价值{{ car.price }}万元</h4>
    <Child />
  </div>
</template>

<script setup lang="ts" name="Father">
import { provide, reactive, ref } from "vue";
import Child from "./Child.vue";
let money = ref(1000);
let car = reactive({
  brand: "兰博基尼",
  price: 1000,
});
function updateMoney(val: number) {
  money.value -= val;
}
// provide('数据的名字',值) 向后代提供数据
// provide("money", money);
//值money不写.value主要目的为了响应式，.value直接变成值了
// provide("moneyConext", { money: money, updateMoney });
//es6中money: money属性跟名字一样，可以简写
//moneyConext提供一个对象过去给后代
provide("moneyConext", { money, updateMoney });
provide("car", car);
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
</style>
